<template>
  <div class="titleborder">
    <div class="out-container" :style="outContainerStyle">
      <div class="titlecontent" :style="titleContentStyle">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
import defaultmixins from '@/mixins/bigScreen/defaultmixins'
export default {
  name: 'TableDashBorder',
  mixins: [defaultmixins],
  props: ['title'],
  data() {
    return {
      backUrl: require('@/assets/linglong/bg_nengliushengchantu.png')
    }
  },
  computed: {
    titleContentStyle() {
      return {
        ...this.borderOptions.titleContent
      }
    },
    outContainerStyle() {
      return {
        backgroundImage: `url(${this.backUrl})`,
        width: 667 * this.$root.setting.scale + 'px',
        height: 'fit-content'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .titleborder {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    .out-container {
      // border: 1px dashed #FFFFFF;
      margin: 0 auto;
      background-position: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .titlespan {
    border: 1px dashed #fffdef;
    width: 100%;
    background-size: 100% 100%;
    text-align: center;
  }
  .titlecontent {

  }
  .lbdiv {
  }
</style>
